<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #999;
            padding: 50px;
            background: #eee;
        }
        p {
            font-size: 24px;
            line-height: 1.5em;
            font-family: serif;
        }
        .box {
            margin: 0 auto;
            max-width: 600px;
            background: #fff;
            border: 1px solid #ccc;
        }
        .content {
            padding: 32px 42px;
            border-radius: 0 0 3px 3px;
        }
        .content h1 {
            color: #444;
            margin-top: 0;
        }
        .image {
            width: 100%;
            overflow: hidden;
            padding: 0 0 50%;
            position: relative;
            -webkit-transition: padding 0.5s ease-out;
            transition: padding 0.5s ease-out;
            background-image: url("img/800x600.jpg");
            background-size: cover;
        }
        .image:hover {
            padding-bottom: 60%;
        }
        .image::before {
            left: 0;
            bottom: 0;
            content: '';
            width: 32px;
            position: absolute;
            border-bottom: 12px solid #fff;
            border-right: 12px solid transparent;
        }
        .image::after {
            bottom: 0;
            left: 44px;
            content: '';
            width: 100%;
            position: absolute;
            border-bottom: 12px solid #fff;
            border-left: 12px solid transparent;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="image">
    </div>
    <div class="content">
        <h1>This box breathes.</h1>
        <p>All of the things that surround my house feel comfortable, and all of the things that occupy my basement are trying to convince me otherwise.</p>
    </div>
</div>
</body>
</html>